<template>
  <div class="time-picker">
    <van-field
      :label="label"
      :value="value"
      placeholder="点击选择时间"
      clickable
      readonly
      @click="openPoup"
    />
    <van-popup v-model="timeShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :title="label"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { parseTime } from "../../utils/index";
export default {
  name: "TimePicker",
  props: {
    label: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      timeShow: false,
      currentDate: "",
    };
  },
  created() {
    this.currentDate = new Date();
  },
  methods: {
    openPoup() {
      this.currentDate = this.value ? new Date(this.value) : new Date();
      this.timeShow = true;
    },
    onConfirm(data) {
      this.$emit("input", parseTime(data, "{y}/{m}/{d} {h}:{i}:{s}"));
      this.timeShow = false;
    },
    onCancel() {
      this.timeShow = false;
      this.currentDate = new Date();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>